<template>
	<view class="property-detail-container">
		<geek-list :enabled="false" ref="list" :api="fetchList" isPage>
			<block #default="{item}">
				<uni-list-item class="item">
					<template v-slot:header>
						<view class="time-box">
							<view class="date">
								{{item.date}}
							</view>
							<view class="time">
								{{item.time}}
							</view>
						</view>
					</template>
					<template v-slot:body>
						<uni-icons custom-prefix="iconfont" :color="item.color" :type="item.icon" size="40"></uni-icons>
					</template>
					<template v-slot:footer>
						<view class="info">
							<view class="price" :style="{color:item.priceColor}">
								<text>{{item.unit}}</text>
								<text>{{$formatPrice(item.amount)}}</text>
							</view>
							<view class="des">
								<text v-if="item.typeName">{{item.typeName}}</text>
								<text v-if="item.orderNo">{{item.orderNo}}</text>
							</view>
						</view>
					</template>
				</uni-list-item>
			</block>
		</geek-list>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		history
	} from '@/api/seller/account.js'

	export default {
		data() {
			return {
				accountId: '',
				enums: {
					1: {
						type: 1,
						name: '充值',
						icon: 'icon-chongzhi1',
						color: '#fa3534'
					},
					2: {
						type: 2,
						name: '提现',
						icon: 'icon-tixian1',
						color: '#f29100'
					},
					3: {
						type: 3,
						name: '调账',
						icon: 'icon-a-tiaozheng6',
						color: '#909399'
					},
					4: {
						type: 4,
						name: '转账',
						icon: 'icon-zhuanzhang',
						color: '#aa5500'
					},
					5: {
						type: 5,
						name: '进货',
						icon: 'icon-caigoujinhuo',
						color: '#19be6b'
					},
					6: {
						type: 6,
						name: '出货',
						icon: 'icon-yichuhuo',
						color: '#3c9cff'
					},
					9: {
						type: 9,
						name: '收益',
						icon: 'icon-shouyi',
						color: '#f56c6c'
					},
					17: {
						type: 17,
						name: '预售冻结',
						icon: 'icon-dongjie',
						color: '#f9ae3d'
					},
					18: {
						type: 18,
						name: '预售成交',
						icon: 'icon-chengjiao',
						color: '#5ac725'
					},
					19: {
						type: 19,
						name: '预售冲正',
						icon: 'icon-faqichongzheng',
						color: '#97aaa9'
					},
					29: {
						type: 29,
						name: '额度转换',
						icon: 'icon-eduzhuanhuan',
						color: '#998bde'
					}
				},
				list: []
			}
		},

		methods: {
			fetchList(data = {}) {
				if (this.accountId) {
					data.account = this.accountId
					return history(data).then((res) => {
						return {
							...res,
							rows: _.map(res?.rows || [], vo => {
								return {
									...vo,
									typeName: _.get(this.enums, `${vo.bizType}.name`, '') || '',
									color: _.get(this.enums, `${vo.bizType}.color`, '#909399') ||
										'#909399',
									priceColor: vo.fundDirection == 1 ? '#fa3534' : vo.fundDirection == 2 ?
										'#19be6b' : '#303133',
									icon: _.get(this.enums, `${vo.bizType}.icon`, 'icon-jine') ||
										'icon-jine',
									unit: vo.fundDirection == 1 ? '+' : vo.fundDirection == 2 ? '-' : '',
									date: this.$u.timeFormat(vo.createTime, 'mm-dd'),
									time: this.$u.timeFormat(vo.createTime, 'hh:MM')
								}
							})
						}
					})
				}

				return null
			}
		},

		onLoad(options) {
			this.accountId = options?.id || ''
			// uni.setNavigationBarTitle({
			// 	title:this.accountId ? this.accountId : '账户明细'
			// })
		},

		onReachBottom() {
			this.$refs.list.onScrollToLower()
		},

		//下拉刷新
		onPullDownRefresh() {
			this.$refs.list.resetList()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
	.property-detail-container {
		padding: 20rpx;

		&::v-deep {
			.item {
				border-radius: 18rpx;
				padding: 10rpx;

				.uni-list-item__container {
					display: flex;
					align-items: center;

					.time-box {
						margin-right: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.date {
							white-space: nowrap;
							font-size: 34rpx;
							color: #000;
							font-weight: 600;
						}

						.time {
							color: #999;
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}

					.info {
						margin-left: 24rpx;
						display: flex;
						flex-direction: column;

						.price {
							font-size: 34rpx;
							font-weight: bold;
						}

						.des {
							display: flex;
							align-items: center;
							padding: 10rpx 0;

							text {
								white-space: nowrap;
								font-size: 26rpx;

								&+text {
									margin-left: 24rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>